import { vars } from '@knno/ui/global.css';
import { style, globalStyle } from '@vanilla-extract/css';

export const richEditorStyle = style({
	display: 'flex',
	flexDirection: 'column',
	borderRadius: vars.layout.smallRadius,
	border: `1px solid ${vars.color.border}`,
	backgroundColor: vars.color.baseBackground,
	overflow: 'hidden',
	selectors: {
		'&.active': {
			border: `1px solid ${vars.color.brand}`,
		},
	},
	minHeight: '20em',
	maxHeight: '40em',
});

globalStyle(`${richEditorStyle}>.toolbar`, {
	display: 'flex',
	alignItems: 'center',
	flexWrap: 'wrap',
	backgroundColor: vars.color.pageBackground,
	borderBottom: `1px solid ${vars.color.border}`,
});

globalStyle(`${richEditorStyle}>.toolbar button`, {
	padding: '0 0.8em',
	margin: 0,
	borderRadius: 0,
});

globalStyle(`${richEditorStyle}>.toolbar button:hover`, {
	backgroundColor: vars.color.activeBackground,
});

globalStyle(`${richEditorStyle}>.toolbar button[checked]`, {
	backgroundColor: vars.color.border,
});

globalStyle(`${richEditorStyle}>.toolbar button[disabled]>svg`, {
	fill: vars.color.regularText,
});

globalStyle(`${richEditorStyle} span`, {
	display: 'block',
	width: '1px',
	height: '1em',
	backgroundColor: vars.color.darkBorder,
	margin: '0 4px',
});

globalStyle(`${richEditorStyle}>.toolbar button>svg`, {
	width: '1.2em',
	height: '1.2em',
});

globalStyle(`${richEditorStyle}>div.rich-text-box`, {
	display: 'flex',
	flexDirection: 'column',
	flex: 1,
	overflow: 'hidden',
	overflowY: 'auto',
});

globalStyle(`${richEditorStyle} rich-editor`, {
	padding: '0.6em',
	flexGrow: 1,
	flexShrink: 0,
});

globalStyle(`${richEditorStyle} rich-editor:focus`, {
	padding: '0.6em',
	outline: 'none',
});
